<%--
  Created by IntelliJ IDEA.
  User: szq
  Date: 2022/3/25
  Time: 21:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>


<div class="col-md-9" >
    <div class="data_list" style="border-radius: 15px;width: 100%">
        <div class="data_list_title"><span class="glyphicon glyphicon-edit"></span>&nbsp;在线客服（测试中） </div>
            <div class="container-fluid" style="width: 100%;height: 600px;position: relative">
                <div style="width: 100%;height: 80%;" >
                    <div class="talk_show" id="words" id="record">
                        <div class="atalk"><span id="asay">您好，很高兴为您服务！请输入您的问题或者询问代号进行疑难解答</span>
                            <img src="statics/images/server_img.png" />
                        </div>

                    </div>
                    <div style="background-color: #CCCCCC;height: 2px;width: 100%"></div><br>
                    <div class="talk_input">
                        <textarea class="talk_word" id="talkwords" placeholder="请在此处输入您的疑问"></textarea>
                        <input type="button" value="发送" class="btn btn-primary" style="width: 60px" id="talksub">
                    </div>
                </div>
                <%--信息提示音--%>
                <%--<audio src="static/sounds/alert.mp3"  id="al"></audio>--%>
                </div>

            </div>
        </div>

    </div>
</div>

<script type="text/javascript">
    var send = (function() {
        var Words = document.getElementById("words");

        var talkWords = document.getElementById("talkwords");
        var talkSub = document.getElementById("talksub");
        return {

            init: function() {

                this.event();
            },
            event: function() {
                var that = this;
                talkSub.onclick = function() {
                    that.chart();
                }
                talkWords.onkeydown = function(e) {
                    var keyCode = e.keyCode || e.which;
                    if(e.ctrlKey) {
                        if(keyCode == 13) {
                            that.chart();;
                        }
                    }
                }

            },
            chart: function() {

                var str = "";
                if(talkWords.value == "") {

                    alert("消息不能为空");
                    return;
                }

                //添加用户发送内容
                //alert(${user.head});
                str = '<br><div class="btalk"><span>' + talkWords.value + '</span><img src="user?actionName=userHead&imageName=${user.head}"/></div>';
                Words.innerHTML = Words.innerHTML + str;

                //滚动条向下
                Words.scrollTop = Words.scrollHeight;

                //向后台发送请求

                $.ajax({
                    type:"get",
                    url:"question",
                    data:{
                        actionName:"customerService",
                        info:talkWords.value
                    },
                    success:function (result) {


                        var ss = '';
                        if (result.code == 1){
                            ss = getText(result.result);
                        }

                        if (result.code != 2){
                            str = '<br><div class="atalk"><span>' + result.msg
                                + ss
                                + '</span><img src="statics/images/server_img.png"/></div>';

                        }else {
                            str = '<br><div class="atalk"><span>' + '疑问编号: ' + result.result[0].id + '<br>'
                                + '疑问内容: ' + result.result[0].text + '<br>'
                                + '答复: ' + result.result[0].answer + '<br>'
                                + '</span><img src="statics/images/server_img.png"/></div>';

                        }
                        //str = '<br><div class="atalk"><span>' + result.msg + '</span><img src="statics/images/server_img.png"/></div>';


                        Words.innerHTML = Words.innerHTML + str;
                        talkWords.value = "";

                        //滚动条向下
                        Words.scrollTop = Words.scrollHeight;

                        /*document.getElementById("al").play();*/
                    }

                })
                talkWords.value = "";

            }

        }

    }());

    function getText(result){

        var str = '\n';

        for(var i = 0;i < result.length; i++){
            str += result[i].id + '.' + result[i].text + "\n";
        }

        return str;
    }


    send.init();

</script>